<!--
 * @Author: zqg
 * @Date: 2021-02-22 15:32:25
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-15 15:20:16
 * @Description: 职位下拉选择框
-->
<template>
  <el-select
    clearable
    :class="className"
    :disabled="disabled"
    v-model="roleId"
    :placeholder="placeholder"
    @change="change"
    :size="size"
  >
    <el-option
      v-for="item in jobList"
      :key="item.id"
      :value="item.id"
      :label="item.roleName"
    />
  </el-select>
</template>

<script>
import { roleGetStoreRole } from '@/api/after-sale/systemManage/role'
import { getStoreId } from '@/utils/index'
export default {
  model: {
    props: 'value',
    event: 'input'
  },
  props: {
    value: {
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择职位'
    },
    size: {
      type: String,
      default: 'medium'
    },
    className: {
      type: String,
      default: ''
    },
    shopId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      // 职位id
      roleId: '',
      // 所有职位列表
      jobList: []
    }
  },
  watch: {
    value(value) {
      this.roleId = value
    }
  },
  methods: {
    /**
     * @description: 下拉选择回调
     * @param {String | Number} value
     * @return {*}
     */
    change(value) {
      this.$emit('input', value)
    },
    /**
     * @description: 获取当前门店的职位列表
     * @param {*}
     * @return {Promise}
     */
    getJobList() {
      roleGetStoreRole(this.shopId || getStoreId()).then(res => {
        const { success, data } = res
        if (success) {
          this.jobList = data
        }
      })
    }
  },
  mounted() {
    this.roleId = this.value
    this.getJobList()
  }
}
</script>
